<template>
    <div class="wrapper">
        <swiper :options="swiperOption" v-if="showSwiper">
            <!-- slides -->
            <swiper-slide v-for="item of list"  v-bind:key="item.id">
                <img v-bind:src="item.imgUrl" alt="" class="img100">
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
            <!--  <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div>-->
            <!--<div class="swiper-scrollbar"   slot="scrollbar"></div>-->
        </swiper>
    </div>
</template>

<script>
    export default {
      name: "HomeSwiper",
      props: { //这个属性的定义 用于子组件接收父组件传递的值
        list: Array
      },
        //在子组件上定义一个data数据时  这个data必须是一个函数 以下是ES5的写法
        data:function () {
            return{
                swiperOption:{
                    pagination:'.swiper-pagination',
                    loop:true
                },
               /* swiperList: [
                    {
                        id:'0001',
                        imgUrl:'http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg'
                    },
                    {
                        id:'0002',
                        imgUrl:'http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg'
                    },
                    {
                        id:'0003',
                        imgUrl:'http://img1.qunarzz.com/piao/fusion/1802/51/e78f936a5b404102.jpg_640x200_c14f0b3a.jpg'
                    },
                    {
                        id:'0004',
                        imgUrl:'http://img1.qunarzz.com/piao/fusion/1712/91/a275569091681d02.jpg_640x200_0519ccb9.jpg'
                    }
                ]*/
            }
        },
      //计算属性
      computed: {
        // 解决swiper轮播再加载完ajax请求后 轮播图片处于最后一张 而非第一张图片
        showSwiper () {
          return this.list.length
        }
      }
    }
</script>

<style scoped>
    .wrapper{
       /* overflow: hidden;
        width: 100%;
        height: 0;
        padding-bottom: 62.5%;
        background: #eee;*/
    }
    /*样式穿透 即不在受scoped的限制*/
    .wrapper >>> .swiper-pagination-bullet-active {
        opacity: 1;
        background: #fff;
    }
    .img100{
        width: 100%;
        height: auto;
    }
</style>
